-
Notifications
You must be signed in to change notification settings - Fork 174
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Optimize scroll performance #130
base: master
Are you sure you want to change the base?
Conversation
Thanks for the PR.
|
Re: batching, I believe this is something that really should be handled at the application level - you can inject your own batcher - rather than in individual components. I've seen performance gains from batching at rAF, but our application processes a lot of potentially redundant data updates so it is a bit special. |
@caseywebdev what might definitive proof for (3) look like? Is there a test case or methodology you can suggest? A rather unscientific test of holding down the PGDN key with raf enabled results in significantly less CPU time processing events, and effectively eliminates long frame renders: Without raf on the left, with on the right. The selected period is small for display purposes, but the results are consistent over any time period. |
I just did some profiling on one of our most intensive react-list implementations (~10k rows x 100+ columns) and I found scrolling FPS was the same or even slower when using the requestAnimationFrame batching. This optimization feels like it might be case-specific, in which case @STRML's suggestion of customizing your batcher might be the best bet. |
@STRML I'm aware of the raf batcher, needs work though, I'll take a look at the commit you've just made on that fork. @caseywebdev I'm curious as to your methodology - I was just using the example page from this repo to test. What sort of FPS were you getting? |
Yeah, I found a lot of issues with the base config with regards to page visibility and a tendency to stampede timers. I've found the above implementation to work quite well for us. |
Hey all Just curious , it seems like a good thing to merge? |
Bump |
No need to bump... I'm not sold on RAF for this and it's also out of date. |
Ahh, thanks for commenting |
Hi, I'm using this package in my Twitter client application. I found that scroll performance of timeline was not so good. So I added some rendering optimizations to this package.
Now scrolling performance is 10% faster in average. And it's especially effective when re-rendering happens so many times.
this.updateFrame
doesn't prevent browser's event handling bypreventDefault
orstopPropagation
. This is available in the latest browsers and old ones simply ignore this. So there is no breaking change.requestAnimationFrame
not to prevent scrolling animation. This has most impact to performance in this PR. For example, in my app,j
scrolls down a timeline. When key-repeatingj
, there was so manysetState
call and re-rendering. As the result, app couldn't accept user's input any more until all input were processed. After using animation frame to render, rendering is performed once per animation frame, avoiding boring so many re-renderings bysetState
.